<template>
  <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
  <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%"
  >
    <el-col>
      <!-- 左侧内容 -->
      <span>{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col>{{ treeNode.manager }}</el-col>
        <el-col>
          <!-- 放置下拉菜单 -->
          <el-dropdown @command="operateDepts">
            <!-- 内容 -->
            <span
              >操作
              <i class="el-icon-arrow-down" />
            </span>
            <!-- 具名插槽 -->
            <el-dropdown-menu slot="dropdown">
              <!-- 下拉选项 -->
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="del">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>

      <!-- 右侧内容 -->
    </el-col>
  </el-row>
</template>

<script>
// 引入封装的方法
import { delDepatments } from '@/api/department'
export default {
  // props 可以用数组来接收数据 也可以用对象来接受
  props: {
    // 定义一个props属性
    treeNode: {
      required: true, // 要求对方使用您得组件得时候，必须传入treeNode属性 如果不传 就会报错
      type: Object, // 对象
    },
    isRoot: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    // 点击编辑删除添加时触发方法
    // 参数自己定义
    operateDepts(type) {
      if(type === 'add') {
        // 添加部门
        // 告诉父组件 显示弹层  在当前点击的部门下 添加子部门 => this.treeNode就是当前点击部门
        this.$emit('addDepts', this.treeNode)
      } else if( type === 'edit') {
        // 编辑
        // 调入父组件  记录当前节点
        this.$emit('editDepts', this.treeNode) // 触发自定义事件 点击谁  编辑谁
      } else {
        // 删除
        // element ui 里面的方法
        this.$confirm('你确定要删除么 好兄弟').then( ()=> {
          // alert('你删了')
          // 这里是个 promise 对象  ruturn 将 promise 进行return
          delDepatments(this.treeNode.id)
        }).then( ()=> {
          // 只需要等到成功的时候 现在删除 只是前端变了 后端没变
          // $emit 定义一个事件 通知父组件更新数据
          this.$emit('delDepts')
          this.$message.success('删除部门成功')
        })
      }
    }
  }
}
</script>

<style>
</style>